<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>幻灯片 - UIkit 中文文档</title>
        <meta name="description" content="使用UIkit自动完成组件，能轻松创建可以全屏模式和遮罩效果的，具有炫酷过渡效果的响应式图片或视频幻灯片。能在幻灯片内插入图片、视频甚至iframe等。">
        <meta name="author" content="UIkit中文网">
         
<meta name="keywords" content="UIkit幻灯片,slideshow,图片轮播,Ken Burns,遮罩,iframe">
        <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
        <link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon.png">
        <link id="data-uikit-theme" rel="stylesheet" href="css/uikit.docs.min.css">
        <link rel="stylesheet" href="css/docs.css">
        <link rel="stylesheet" href="../vendor/highlight/highlight.css">
        <script src="../vendor/jquery.js"></script>
        <script src="js/uikit.min.js"></script>
        <script src="../vendor/highlight/highlight.js"></script>
        <script src="js/docs.js"></script>
        <script src="../src/js/components/slideshow.js"></script>
        <script src="../src/js/components/slideshow-fx.js"></script>
    </head>

    <body class="tm-background">

        <nav class="tm-navbar uk-navbar uk-navbar-attached">
            <div class="uk-container uk-container-center">

                <a class="uk-navbar-brand uk-hidden-small" href="../index.html"><img class="uk-margin uk-margin-remove" src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>

                <ul class="uk-navbar-nav uk-hidden-small">
                    <li><a href="documentation_get-started.html">开始使用</a></li>
                    <li><a href="core.html">核心组件</a></li>
                    <li class="uk-active"><a href="components.html">附加组件</a></li>
                    <li><a href="customizer.html">定制工具</a></li>
                    <li><a href="../showcase/index.html">案例展示</a></li>
                    <li><a href="tutorials.html">视频教程</a></li>
                </ul>


                <a href="#tm-offcanvas" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>

                <div class="uk-navbar-brand uk-navbar-center uk-visible-small"><img src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></div>

            </div>
        </nav>

        <div class="tm-middle">
            <div class="uk-container uk-container-center">

                <div class="uk-grid" data-uk-grid-margin>
                    <div class="tm-sidebar uk-width-medium-1-4 uk-hidden-small">

                        <ul class="tm-nav uk-nav" data-uk-nav>
                            <li class="uk-nav-header">布局类组件</li>
                            <li><a href="grid-js.html">动态网格</a></li>
                            <li><a href="grid-parallax.html">视差网格</a></li>
                            <li class="uk-nav-header">导航类组件</li>
                            <li><a href="dotnav.html">圆点导航</a></li>
                            <li><a href="slidenav.html">滑动导航</a></li>
                            <li><a href="pagination-js.html">动态分页</a></li>
                            <li class="uk-nav-header">常用组件</li>
                            <li><a href="form-advanced.html">高级表单</a></li>
                            <li><a href="form-file.html">文件表单</a></li>
                            <li><a href="form-password.html">密码表单</a></li>
                            <li><a href="form-select.html">选择表单</a></li>
                            <li><a href="placeholder.html">占位符</a></li>
                            <li><a href="progress.html">进度条</a></li>
                            <li class="uk-nav-header">JavaScript组件</li>
                            <li><a href="lightbox.html">灯箱</a></li>
                            <li><a href="autocomplete.html">自动完成</a></li>
                            <li><a href="datepicker.html">日期选择器</a></li>
                            <li><a href="htmleditor.html">HTML 编辑器</a></li>
                            <li><a href="slider.html">滚动条</a></li>
                            <li><a href="slideset.html">滑块集</a></li>
                            <li class="uk-active"><a href="slideshow.html">幻灯片</a></li>
                            <li><a href="parallax.html">视差</a></li>
                            <li><a href="accordion.html">手风琴</a></li>
                            <li><a href="notify.html">通知</a></li>
                            <li><a href="search.html">搜索</a></li>
                            <li><a href="nestable.html">可嵌套</a></li>
                            <li><a href="sortable.html">可排序</a></li>
                            <li><a href="sticky.html">附着</a></li>
                            <li><a href="timepicker.html">时间选择器</a></li>
                            <li><a href="tooltip.html">工具提示</a></li>
                            <li><a href="upload.html">上传</a></li>
                        </ul>

                    </div>
                    <div class="tm-main uk-width-medium-3-4">

                        <article class="uk-article">

                            <h1>幻灯片/Slideshow</h1>

                            <p class="uk-article-lead">创建可以全屏模式和遮罩效果的，具有炫酷过渡效果的响应式图片或视频幻灯片。</p>

                            <h2 id="usage"><a href="#usage" class="uk-link-reset">用法</a></h2>

                            <p>要创建幻灯片，只需要添加 <code>.uk-slideshow</code> 类到一个 <code>&lt;ul&gt;</code> 元素中，并将你的图片放入列表条目内。为了加载必要的JavaScript，还需要添加 <code>data-uk-slideshow</code> 属性。</p>

                            <p><span class="uk-badge uk-badge-danger">注意</span> 使用此组件需要额外添加 <code>slideshow.css</code> 文件，在<code>css/components</code>文件夹中。此组件需要额外添加 <code>slideshow.js</code> 文件，在<code>js/components</code>文件夹中。</p>
                            <h3 class="tm-article-subtitle">Example</h3>

                            <ul class="uk-slideshow" data-uk-slideshow="{autoplay:true}">
                                <li><img src="images/placeholder_800x400_1.jpg" width="800" height="400" alt=""></li>
                                <li><img src="images/placeholder_800x400_2.jpg" width="800" height="400" alt=""></li>
                                <li><img src="images/placeholder_800x400_3.jpg" width="800" height="400" alt=""></li>
                            </ul>

                            <p><span class="uk-badge">注意</span> 如果需要自动播放，为data属性添加 <code>{autoplay:true}</code> 选项就行了。</p>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;ul class="uk-slideshow" data-uk-slideshow="{autoplay:true}"&gt;
    &lt;li&gt;&lt;img src="" width="" height="" alt=""&gt;&lt;/li&gt;
&lt;/ul&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="navigations"><a href="#navigations" class="uk-link-reset">导航/Navigations</a></h2>

                            <p>在幻灯片中进行导航，使用 <code>data-uk-slideshow-item</code> 属性就行。为了能指向幻灯片，你必须为每个导航单元设置data属性指向每个幻灯片单元的序号。带有 <code>data-uk-slideshow-item</code> 属性的元素需要被放置在带有 <code>data-uk-slideshow</code> 的容器中。</p>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;div data-uk-slideshow&gt;
    &lt;ul class="uk-slideshow"&gt;
        &lt;li&gt;&lt;/li&gt;
        &lt;li&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;li data-uk-slideshow-item="0"&gt;&lt;a href=""&gt;...&lt;/a&gt;&lt;/li&gt;
    &lt;li data-uk-slideshow-item="1"&gt;&lt;a href=""&gt;...&lt;/a&gt;&lt;/li&gt;
&lt;/div&gt;</code></pre>

                            <p>将data属性设置为 <code>next</code> and <code>previous</code> 就能进行相邻幻灯片之间的切换。像这样：</p>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;div data-uk-slideshow&gt;
    &lt;ul class="uk-slideshow"&gt;
        &lt;li&gt;&lt;/li&gt;
        &lt;li&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;a href="" data-uk-slideshow-item="previous"&gt;&lt;/a&gt;
    &lt;a href="" data-uk-slideshow-item="next"&gt;&lt;/a&gt;
&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h3 id="slide-dot-nav"><a href="#slide-dot-nav" class="uk-link-reset">滑动导航和圆点导航</a></h3>

                            <p>幻灯片组件的灵活性使之可以用任何其他UIkit组件进行幻灯片的导航。比如<a href="slidenav.html">滑动导航</a>和<a href="dotnav.html">圆点导航</a>可以用来像下面这样作为幻灯片的导航。</p>

                            <h4 class="tm-article-subtitle">Example</h4>

                            <div class="uk-slidenav-position" data-uk-slideshow>
                                <ul class="uk-slideshow">
                                    <li><img src="images/placeholder_800x400_1.jpg" width="800" height="400" alt=""></li>
                                    <li><img src="images/placeholder_800x400_2.jpg" width="800" height="400" alt=""></li>
                                    <li><img src="images/placeholder_800x400_3.jpg" width="800" height="400" alt=""></li>
                                </ul>
                                <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous" style="color: rgba(255,255,255,0.4)"></a>
                                <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next" style="color: rgba(255,255,255,0.4)"></a>
                                <ul class="uk-dotnav uk-dotnav-contrast uk-position-bottom uk-flex-center">
                                    <li data-uk-slideshow-item="0"><a href="#">Item 1</a></li>
                                    <li data-uk-slideshow-item="1"><a href="#">Item 2</a></li>
                                    <li data-uk-slideshow-item="2"><a href="#">Item 3</a></li>
                                </ul>
                            </div>

                            <h4 class="tm-article-subtitle">Markup</h4>

<pre><code>&lt;div class="uk-slidenav-position" data-uk-slideshow&gt;
    &lt;ul class="uk-slideshow"&gt;
        &lt;li&gt;&lt;/li&gt;
        &lt;li&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"&gt;&lt;/a&gt;
    &lt;a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"&gt;&lt;/a&gt;
    &lt;ul class="uk-dotnav uk-dotnav-contrast uk-position-bottom uk-text-center"&gt;
        &lt;li data-uk-slideshow-item="0"&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li data-uk-slideshow-item="1"&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="animations"><a href="#animations" class="uk-link-reset">过渡形式</a></h2>

                            <p>幻灯片组件允许添加不同的幻灯片切换效果。你需要做的就是将 <code>animation</code> 参数添加到data属性中，并声明你希望使用的动画。查看下面的表格了解咱都提供了哪些动画效果。</p>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-text-nowrap">
                                    <thead>
                                        <tr>
                                            <th>Class</th>
                                            <th>描述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>fade</code></td>
                                            <td>淡入</td>
                                        </tr>
                                        <tr>
                                            <td><code>scroll</code></td>
                                            <td>滚动进入</td>
                                        </tr>
                                        <tr>
                                            <td><code>scale</code></td>
                                            <td>放大</td>
                                        </tr>
                                        <tr>
                                            <td><code>swipe</code></td>
                                            <td>滑动进入、滑动离开</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <p>要使用下面这些增强的过渡效果，必须在文档head中引入 <code>slideshow-fx.js</code> 。下面表格不翻译了，看后面的演示吧。</p>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-text-nowrap">
                                    <thead>
                                        <tr>
                                            <th>Class</th>
                                            <th>描述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>slice-down</code></td>
                                            <td>The items slide down in slices.</td>
                                        </tr>
                                        <tr>
                                            <td><code>slice-up</code></td>
                                            <td>The items slide up in slices.</td>
                                        </tr>
                                        <tr>
                                            <td><code>slice-up-down</code></td>
                                            <td>The sliced items slide in alterning directions.</td>
                                        </tr>
                                        <tr>
                                            <td><code>fold</code></td>
                                            <td>The items are folded in.</td>
                                        </tr>
                                        <tr>
                                            <td><code>puzzle</code></td>
                                            <td>The items are divided in squares that randomly fade in.</td>
                                        </tr>
                                        <tr>
                                            <td><code>boxes</code></td>
                                            <td>The items are divided in squares that scale in diagonally from the top left corner.</td>
                                        </tr>
                                        <tr>
                                            <td><code>boxes-reverse</code></td>
                                            <td>The items are divided in squares that scale in diagonally from the bottom right corner.</td>
                                        </tr>
                                        <tr>
                                            <td><code>random-fx</code></td>
                                            <td>Different animations are applied randomly.</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <ul class="uk-grid uk-grid-width-1-1 uk-grid-width-medium-1-2" data-uk-grid-margin>
                                <li>
                                    <h3>Scroll</h3>
                                    <div class="uk-slidenav-position" data-uk-slideshow="{animation: 'scroll'}">
                                        <ul class="uk-slideshow">
                                            <li><img src="images/placeholder_800x400_1.jpg" width="800" height="400" alt=""></li>
                                            <li><img src="images/placeholder_800x400_2.jpg" width="800" height="400" alt=""></li>
                                            <li><img src="images/placeholder_800x400_3.jpg" width="800" height="400" alt=""></li>
                                        </ul>
                                        <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous" style="color: rgba(255,255,255,0.4)"></a>
                                        <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next" style="color: rgba(255,255,255,0.4)"></a>
                                    </div>
                                </li>
                                <li>
                                    <h3>Scale</h3>
                                    <div class="uk-slidenav-position" data-uk-slideshow="{animation: 'scale'}">
                                        <ul class="uk-slideshow">
                                            <li><img src="images/placeholder_800x400_1.jpg" width="800" height="400" alt=""></li>
                                            <li><img src="images/placeholder_800x400_2.jpg" width="800" height="400" alt=""></li>
                                            <li><img src="images/placeholder_800x400_3.jpg" width="800" height="400" alt=""></li>
                                        </ul>
                                        <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous" style="color: rgba(255,255,255,0.4)"></a>
                                        <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next" style="color: rgba(255,255,255,0.4)"></a>
                                    </div>
                                </li>
                                <li>
                                    <h3>Swipe</h3>
                                    <div class="uk-slidenav-position" data-uk-slideshow="{animation: 'swipe'}">
                                        <ul class="uk-slideshow">
                                            <li><img src="images/placeholder_800x400_1.jpg" width="800" height="400" alt=""></li>
                                            <li><img src="images/placeholder_800x400_2.jpg" width="800" height="400" alt=""></li>
                                            <li><img src="images/placeholder_800x400_3.jpg" width="800" height="400" alt=""></li>
                                        </ul>
                                        <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous" style="color: rgba(255,255,255,0.4)"></a>
                                        <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next" style="color: rgba(255,255,255,0.4)"></a>
                                    </div>
                                </li>
                                <li>
                                    <h3>Slice Down</h3>
                                    <div class="uk-slidenav-position" data-uk-slideshow="{animation: 'slice-down'}">
                                        <ul class="uk-slideshow">
                                            <li><img src="images/placeholder_800x400_1.jpg" width="800" height="400" alt=""></li>
                                            <li><img src="images/placeholder_800x400_2.jpg" width="800" height="400" alt=""></li>
                                            <li><img src="images/placeholder_800x400_3.jpg" width="800" height="400" alt=""></li>
                                        </ul>
                                        <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous" style="color: rgba(255,255,255,0.4)"></a>
                                        <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next" style="color: rgba(255,255,255,0.4)"></a>
                                    </div>
                                </li>
                                <li>
                                    <h3>Slice Up</h3>
                                    <div class="uk-slidenav-position" data-uk-slideshow="{animation: 'slice-up'}">
                                        <ul class="uk-slideshow">
                                            <li><img src="images/placeholder_800x400_1.jpg" width="800" height="400" alt=""></li>
                                            <li><img src="images/placeholder_800x400_2.jpg" width="800" height="400" alt=""></li>
                                            <li><img src="images/placeholder_800x400_3.jpg" width="800" height="400" alt=""></li>
                                        </ul>
                                        <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous" style="color: rgba(255,255,255,0.4)"></a>
                                        <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next" style="color: rgba(255,255,255,0.4)"></a>
                                    </div>
                                </li>
                                <li>
                                    <h3>Slice Up Down</h3>
                                    <div class="uk-slidenav-position" data-uk-slideshow="{animation: 'slice-up-down'}">
                                        <ul class="uk-slideshow">
                                            <li><img src="images/placeholder_800x400_1.jpg" width="800" height="400" alt=""></li>
                                            <li><img src="images/placeholder_800x400_2.jpg" width="800" height="400" alt=""></li>
                                            <li><img src="images/placeholder_800x400_3.jpg" width="800" height="400" alt=""></li>
                                        </ul>
                                        <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous" style="color: rgba(255,255,255,0.4)"></a>
                                        <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next" style="color: rgba(255,255,255,0.4)"></a>
                                    </div>
                                </li>
                                <li>
                                    <h3>Fold</h3>
                                    <div class="uk-slidenav-position" data-uk-slideshow="{animation: 'fold'}">
                                        <ul class="uk-slideshow">
                                            <li><img src="images/placeholder_800x400_1.jpg" width="800" height="400" alt=""></li>
                                            <li><img src="images/placeholder_800x400_2.jpg" width="800" height="400" alt=""></li>
                                            <li><img src="images/placeholder_800x400_3.jpg" width="800" height="400" alt=""></li>
                                        </ul>
                                        <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous" style="color: rgba(255,255,255,0.4)"></a>
                                        <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next" style="color: rgba(255,255,255,0.4)"></a>
                                    </div>
                                </li>
                                <li>
                                    <h3>Puzzle</h3>
                                    <div class="uk-slidenav-position" data-uk-slideshow="{animation: 'puzzle'}">
                                        <ul class="uk-slideshow">
                                            <li><img src="images/placeholder_800x400_1.jpg" width="800" height="400" alt=""></li>
                                            <li><img src="images/placeholder_800x400_2.jpg" width="800" height="400" alt=""></li>
                                            <li><img src="images/placeholder_800x400_3.jpg" width="800" height="400" alt=""></li>
                                        </ul>
                                        <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous" style="color: rgba(255,255,255,0.4)"></a>
                                        <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next" style="color: rgba(255,255,255,0.4)"></a>
                                    </div>
                                </li>
                                <li>
                                    <h3>Boxes</h3>
                                    <div class="uk-slidenav-position" data-uk-slideshow="{animation: 'boxes'}">
                                        <ul class="uk-slideshow">
                                            <li><img src="images/placeholder_800x400_1.jpg" width="800" height="400" alt=""></li>
                                            <li><img src="images/placeholder_800x400_2.jpg" width="800" height="400" alt=""></li>
                                            <li><img src="images/placeholder_800x400_3.jpg" width="800" height="400" alt=""></li>
                                        </ul>
                                        <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous" style="color: rgba(255,255,255,0.4)"></a>
                                        <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next" style="color: rgba(255,255,255,0.4)"></a>
                                    </div>
                                </li>
                                <li>
                                    <h3>Boxes Reverse</h3>
                                    <div class="uk-slidenav-position" data-uk-slideshow="{animation: 'boxes-reverse'}">
                                        <ul class="uk-slideshow">
                                            <li><img src="images/placeholder_800x400_1.jpg" width="800" height="400" alt=""></li>
                                            <li><img src="images/placeholder_800x400_2.jpg" width="800" height="400" alt=""></li>
                                            <li><img src="images/placeholder_800x400_3.jpg" width="800" height="400" alt=""></li>
                                        </ul>
                                        <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous" style="color: rgba(255,255,255,0.4)"></a>
                                        <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next" style="color: rgba(255,255,255,0.4)"></a>
                                    </div>
                                </li>
                            </ul>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;ul class="uk-slideshow" data-uk-slideshow="{animation: 'random-fx'}"&gt;...&lt;/ul&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="ken-burns-effect"><a href="#ken-burns-effect" class="uk-link-reset">Ken Burns 效果</a></h2>

                            <p>炫酷的 Ken Burns 效果也能用在幻灯片里。只需要添加 <code>{kenburns:true}</code> 选项到data属性中就行。这个效果还能用在视频上。</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-slidenav-position" data-uk-slideshow="{kenburns:true, autoplay:true}">
                                <ul class="uk-slideshow">
                                    <li><img src="images/placeholder_800x400_1.jpg" width="800" height="400" alt=""></li>
                                    <li><img src="images/placeholder_800x400_2.jpg" width="800" height="400" alt=""></li>
                                    <li><img src="images/placeholder_800x400_3.jpg" width="800" height="400" alt=""></li>
                                </ul>
                                <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous" style="color: rgba(255,255,255,0.4)"></a>
                                <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next" style="color: rgba(255,255,255,0.4)"></a>
                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;ul class="uk-slideshow" data-uk-slideshow="{kenburns:true}"&gt;...&lt;/ul&gt;</code></pre>

                            自定义动画持续时间:

<pre><code>&lt;ul class="uk-slideshow" data-uk-slideshow="{kenburns:'30s'}"&gt;...&lt;/ul&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="fullscreen"><a href="#fullscreen" class="uk-link-reset">全屏幻灯片</a></h2>

                            <p>创建填满整个视口的全屏幻灯片，只需要添加一个 <code>.uk-slideshow-fullscreen</code> 类。</p>

                            <h4 class="tm-article-subtitle">Markup</h4>

<pre><code>&lt;ul class="uk-slideshow uk-slideshow-fullscreen" data-uk-slideshow&gt;...&lt;/ul&gt;</code></pre>


                            <hr class="uk-article-divider">

                            <h2 id="overlays"><a href="#overlays" class="uk-link-reset">遮罩</a></h2>

                            <p>还可以用遮罩来提升幻灯片的效果，为幻灯片列表条目内的 <code>&lt;div&gt;</code> 元素添加 <code>.uk-uk-overlay-panel</code> 类就行。添加 <code>.uk-overlay-background</code> 和 <code>.uk-overlay-fade</code> 带来背景与过渡效果。要实现幻灯片显示时即触发遮罩，添加 <code>.uk-uk-overlay-active</code> 到列表容器即可。更多选项查看 <a href="overlay.html">遮罩组件</a>.</p>


                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-slidenav-position" data-uk-slideshow>
                                <ul class="uk-slideshow uk-overlay-active">
                                    <li>
                                        <img src="images/placeholder_800x400_1.jpg" width="800" height="400" alt="">
                                        <div class="uk-overlay-panel uk-overlay-background uk-overlay-fade uk-flex uk-flex-center uk-flex-middle uk-text-center">
                                            <div>
                                                <h3>Overlay</h3>
                                                <p>Lorem <a href="#">ipsum dolor</a> sit amet, consetetur sadipscing elitr,<br>sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
                                                <button class="uk-button uk-button-primary">Button</button>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <img src="images/placeholder_800x400_2.jpg" width="800" height="400" alt="">
                                        <div class="uk-overlay-panel uk-overlay-background uk-overlay-top uk-overlay-slide-top">
                                            <h3>Overlay Top</h3>
                                            <p>Lorem <a href="#">ipsum dolor</a> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
                                            <button class="uk-button uk-button-primary">Button</button>
                                        </div>
                                    </li>
                                    <li>
                                        <img src="images/placeholder_800x400_3.jpg" width="800" height="400" alt="">
                                        <div class="uk-overlay-panel uk-overlay-background uk-overlay-bottom uk-overlay-slide-bottom">
                                            <h3>Overlay Bottom</h3>
                                            <p>Lorem <a href="#">ipsum dolor</a> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
                                            <button class="uk-button uk-button-primary">Button</button>
                                        </div>
                                    </li>
                                    <li>
                                        <img src="images/placeholder_800x400_1.jpg" width="800" height="400" alt="">
                                        <div class="uk-overlay-panel uk-overlay-background uk-overlay-left uk-overlay-slide-left uk-width-1-4">
                                            <h3>Overlay Left</h3>
                                            <p>Lorem <a href="#">ipsum dolor</a> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
                                            <button class="uk-button uk-button-primary">Button</button>
                                        </div>
                                    </li>
                                    <li>
                                        <img src="images/placeholder_800x400_2.jpg" width="800" height="400" alt="">
                                        <div class="uk-overlay-panel uk-overlay-background uk-overlay-right uk-overlay-slide-right uk-width-1-4">
                                            <h3>Overlay Right</h3>
                                            <p>Lorem <a href="#">ipsum dolor</a> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
                                            <button class="uk-button uk-button-primary">Button</button>
                                        </div>
                                    </li>
                                </ul>
                                <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous" style="color: rgba(255,255,255,0.4)"></a>
                                <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next" style="color: rgba(255,255,255,0.4)"></a>
                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;ul class="uk-slideshow uk-overlay-active" data-uk-slideshow&gt;
    &lt;li&gt;
        &lt;img src="" width="" height="" alt=""&gt;
        &lt;div class="uk-overlay-panel uk-overlay-background uk-overlay-fade"&gt;...&lt;/div&gt;
    &lt;/li&gt;
&lt;/ul&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="video"><a href="#video" class="uk-link-reset">视频</a></h2>

                            <p>UIkit 允许在幻灯片中放入视频和iframe。</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-slidenav-position" data-uk-slideshow>
                                <ul class="uk-slideshow">
                                    <li>
                                        <video width="600" height="400" autoplay loop muted controls>
                                            <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4?test1" type="video/mp4">
                                            <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv?test2" type="video/ogg">
                                        </video>
                                    </li>
                                    <li>
                                        <iframe src="http://player.vimeo.com/video/1084537?title=0&amp;byline=0&amp;autoplay=1&amp;loop=1&amp;setVolume=0" width="500" height="281" frameborder="0" allowfullscreen></iframe>
                                    </li>
                                </ul>
                                <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
                                <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>
                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;!-- 带有视频的幻灯片 --&gt;
&lt;ul class="uk-slideshow"&gt;
    &lt;li&gt;
        &lt;video width="" height="" autoplay loop muted controls&gt;
            &lt;source src="" type=""&gt;
        &lt;/video&gt;
    &lt;/li&gt;
&lt;/ul&gt;

&lt;!-- 带有Iframe的幻灯片 --&gt;
&lt;ul class="uk-slideshow"&gt;
    &lt;li&gt;
        &lt;iframe src="" width="" height="" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
    &lt;/li&gt;
&lt;/ul&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="content"><a href="#content" class="uk-link-reset">内容</a></h2>

                            <p>基本上可以在幻灯片内插入任何内容，比如文本甚至整个网格。</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-slidenav-position" data-uk-slideshow>
                                <ul class="uk-slideshow uk-text-center">
                                    <li>
                                        <div class="uk-panel uk-panel-box">
                                            <div class="uk-grid">
                                                <div class="uk-width-1-3">
                                                    <img src="images/placeholder_200x200.svg" width="200" height="200" alt="">
                                                </div>
                                                <div class="uk-width-2-3">
                                                    <h3 class="uk-panel-title">Headline 1</h3>
                                                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
                                                    <button class="uk-button">Read more</button>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="uk-panel uk-panel-box uk-panel-box-primary">
                                            <div class="uk-grid">
                                                <div class="uk-width-2-3">
                                                    <h3 class="uk-panel-title">Headline 2</h3>
                                                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
                                                    <button class="uk-button">Read more</button>
                                                </div>
                                                <div class="uk-width-1-3">
                                                    <img src="images/placeholder_200x200.svg" width="200" height="200" alt="">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                                <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
                                <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>
                            </div>

                            <hr class="uk-article-divider">

                            <h2 id="javascript-options"><a href="#javascript-options" class="uk-link-reset">JavaScript 选项</a></h2>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-table-striped uk-text-nowrap">
                                    <thead>
                                        <tr>
                                            <th>选项</th>
                                            <th>默认值</th>
                                            <th>描述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                         <tr>
                                            <td><code>animation</code></td>
                                            <td>'fade'</td>
                                            <td>定义幻灯片之间优先呈现的过渡效果</td>
                                        </tr>
                                        <tr>
                                            <td><code>duration</code></td>
                                            <td>500</td>
                                            <td>过渡效果持续时间</td>
                                        </tr>
                                        <tr>
                                            <td><code>height</code></td>
                                            <td>'auto'</td>
                                            <td>幻灯片高度</td>
                                        </tr>
                                        <tr>
                                            <td><code>start</code></td>
                                            <td>0</td>
                                            <td>定义显示的第一张幻灯片</td>
                                        </tr>
                                        <tr>
                                            <td><code>autoplay</code></td>
                                            <td>false</td>
                                            <td>是否自动切换幻灯片</td>
                                        </tr>
                                        <tr>
                                            <td><code>pauseOnHover</code></td>
                                            <td>true</td>
                                            <td>鼠标悬停时是否暂停自动播放</td>
                                        </tr>
                                        <tr>
                                            <td><code>autoplayInterval</code></td>
                                            <td>7000</td>
                                            <td>定义幻灯片切换的时间跨度</td>
                                        </tr>
                                        <tr>
                                            <td><code>videoautoplay</code></td>
                                            <td>true</td>
                                            <td>定义是否自动开始播放视频</td>
                                        </tr>
                                        <tr>
                                            <td><code>videomute</code></td>
                                            <td>true</td>
                                            <td>定义是否静音播放视频</td>
                                        </tr>
                                        <tr>
                                            <td><code>kenburns</code></td>
                                            <td>false</td>
                                            <td>定义是否启用 Ken Burns 效果</td>
                                        </tr>
                                        <tr>
                                            <td><code>kenburnsanimations</code></td>
                                            <td>
                                                uk-animation-middle-left, uk-animation-top-right,<br>
                                                uk-animation-bottom-left, uk-animation-top-center,<br>
                                                uk-animation-bottom-right</td>
                                            <td>动画方向</td>
                                        </tr>
                                        <tr>
                                            <td><code>slices</code></td>
                                            <td>15</td>
                                            <td>定义碎片的数量，如果启用了 "Slice" 过渡效果的话。</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <h3>事件</h3>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-table-striped uk-text-nowrap">
                                    <thead>
                                        <tr>
                                            <th>名称</th>
                                            <th>参数</th>
                                            <th>描述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>show.uk.slideshow</code></td>
                                            <td>event, next slide, current slide</td>
                                            <td>新的一页显示时触发（动画完成后）</td>
                                        </tr>
                                    <tbody>
                                        <tr>
                                            <td><code>beforeshow.uk.slideshow</code></td>
                                            <td>event, next slide, current slide</td>
                                            <td>新的一页显示前触发（动画完成前）</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                        </article>

                    </div>
                </div>

            </div>
        </div>

        <div class="tm-footer">
            <div class="uk-container uk-container-center uk-text-center">

                <ul class="uk-subnav uk-subnav-line uk-flex-center">
                    <li><a href="http://github.com/uikit/uikit">GitHub</a></li>
                    <li><a href="http://github.com/uikit/uikit/issues">Issues</a></li>
                    <li><a href="http://github.com/uikit/uikit/blob/master/CHANGELOG.md">Changelog</a></li>
                    <li><a href="https://twitter.com/getuikit">Twitter</a></li>
                </ul>

                <div class="uk-panel">
                    <p>Made by <a href="http://www.yootheme.com">YOOtheme</a> with love and caffeine.<br>Licensed under <a href="http://opensource.org/licenses/MIT">MIT license</a>.</p>
                    <a href="../index.html"><img src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>
                </div>

            </div>
        </div>

        <div id="tm-offcanvas" class="uk-offcanvas">

            <div class="uk-offcanvas-bar">

                <ul class="uk-nav uk-nav-offcanvas uk-nav-parent-icon" data-uk-nav="{multiple:true}">
                    <li class="uk-parent"><a href="#">UIkit 中文文档</a>
                        <ul class="uk-nav-sub">
                            <li><a href="documentation_get-started.html">开始使用</a></li>
                            <li><a href="documentation_how-to-customize.html">如何定制</a></li>
                            <li><a href="documentation_layouts.html">布局示例</a></li>
                            <li><a href="core.html">核心组件</a></li>
                            <li><a href="components.html">附加组件</a></li>
                            <li><a href="documentation_project-structure.html">项目结构</a></li>
                            <li><a href="documentation_less-sass.html">Less &amp; Sass 文件</a></li>
                            <li><a href="documentation_create-a-theme.html">创建主题</a></li>
                            <li><a href="documentation_create-a-style.html">创建样式</a></li>
                            <li><a href="documentation_customizer-json.html">Customizer.json</a></li>
                            <li><a href="documentation_javascript.html">JavaScript</a></li>
                            <li><a href="documentation_custom-prefix.html">自定义前缀</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-header">Core</li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-wrench"></i> 默认</a>
                        <ul class="uk-nav-sub">
                            <li><a href="base.html">基础</a></li>
                            <li><a href="print.html">打印</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-th-large"></i> 布局类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="grid.html">网格</a></li>
                            <li><a href="panel.html">面板</a></li>
                            <li><a href="block.html">块</a></li>
                            <li><a href="article.html">文章</a></li>
                            <li><a href="comment.html">评论</a></li>
                            <li><a href="utility.html">效果</a></li>
                            <li><a href="flex.html">Flex</a></li>
                            <li><a href="cover.html">覆盖</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-bars"></i> 导航类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="nav.html">导航菜单</a></li>
                            <li><a href="navbar.html">导航栏</a></li>
                            <li><a href="subnav.html">二级导航</a></li>
                            <li><a href="breadcrumb.html">面包屑</a></li>
                            <li><a href="pagination.html">分页</a></li>
                            <li><a href="tab.html">选项卡</a></li>
                            <li><a href="thumbnav.html">缩略图导航</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-check"></i> 页面元素</a>
                        <ul class="uk-nav-sub">
                            <li><a href="list.html">列表</a></li>
                            <li><a href="description-list.html">描述列表</a></li>
                            <li><a href="table.html">表格</a></li>
                            <li><a href="form.html">表单</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-folder-open"></i> 常用组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="button.html">按钮</a></li>
                            <li><a href="icon.html">图标</a></li>
                            <li><a href="close.html">关闭</a></li>
                            <li><a href="badge.html">徽章</a></li>
                            <li><a href="alert.html">提示框</a></li>
                            <li><a href="thumbnail.html">缩略图</a></li>
                            <li><a href="overlay.html">遮罩</a></li>
                            <li><a href="text.html">文本</a></li>
                            <li><a href="column.html">列</a></li>
                            <li><a href="animation.html">动画</a></li>
                            <li><a href="contrast.html">对比度</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-magic"></i> JavaScript组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="dropdown.html">下拉菜单</a></li>
                            <li><a href="modal.html">模态对话框</a></li>
                            <li><a href="offcanvas.html">抽屉</a></li>
                            <li><a href="switcher.html">切换器</a></li>
                            <li><a href="toggle.html">拨动</a></li>
                            <li><a href="scrollspy.html">滚动监听</a></li>
                            <li><a href="smooth-scroll.html">平滑滚动</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-header">附加组件</li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-th-large"></i> 布局类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="grid-js.html">动态网格</a></li>
                            <li><a href="grid-parallax.html">视差网格</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-bars"></i> 导航类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="dotnav.html">圆点导航</a></li>
                            <li><a href="slidenav.html">滑动导航</a></li>
                            <li><a href="pagination-js.html">动态分页</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-folder-open"></i> 常用组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="form-advanced.html">高级表单</a></li>
                            <li><a href="form-file.html">文件表单</a></li>
                            <li><a href="form-password.html">密码表单</a></li>
                            <li><a href="form-select.html">选择表单</a></li>
                            <li><a href="placeholder.html">占位符</a></li>
                            <li><a href="progress.html">进度条</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-magic"></i> JavaScript组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="lightbox.html">灯箱</a></li>
                            <li><a href="autocomplete.html">自动完成</a></li>
                            <li><a href="datepicker.html">日期选择器</a></li>
                            <li><a href="htmleditor.html">HTML 编辑器</a></li>
                            <li><a href="slider.html">滚动条</a></li>
                            <li><a href="slideset.html">滑块集</a></li>
                            <li><a href="slideshow.html">幻灯片</a></li>
                            <li><a href="parallax.html">视差</a></li>
                            <li><a href="accordion.html">手风琴</a></li>
                            <li><a href="notify.html">通知</a></li>
                            <li><a href="search.html">搜索</a></li>
                            <li><a href="nestable.html">可嵌套</a></li>
                            <li><a href="sortable.html">可排序</a></li>
                            <li><a href="sticky.html">附着</a></li>
                            <li><a href="timepicker.html">时间选择器</a></li>
                            <li><a href="tooltip.html">工具提示</a></li>
                            <li><a href="upload.html">上传</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-divider"></li>
                    <li><a href="../showcase/index.html">案例展示</a></li>
                    <li><a href="tutorials.html">视频教程</a></li>
                </ul>

            </div>

        </div>

    </body>
</html>
